<template>
  <div>
    <top/>
      <div id="center">
        <div id="left">
          <author-info v-if="authorInfo" :author-info="authorInfo" :latest-articles="latestArticles"/>
        </div>
        <div id="right">
          <article-list title="发表的文章" :articles="articles" :page-num="pageNum" :total-num="totalNum"/>
        </div>
      </div>
    <copyright/>
  </div>
</template>

<script>
import top from "../base/top"
import copyright from "../base/copyright"
import AuthorInfo from "../detail/AuthorInfo"
import ArticleList from "../index/ArticleList";
import {ip} from "../../data/ip";
import axios from "axios";

export default {
  name: "profile",
  components:{
    top,copyright,AuthorInfo,ArticleList
  },
  data(){
    return {
      articles: [],
      authorInfo:null,
      latestArticles:[],
      pageNum:1,
      totalNum: 1
    }
  },
  mounted(){
    this.requestForData()
  },
  methods:{
    requestForData(){
      axios({
        url: ip + "/api/profile",
        method:"get",
        params:{
          id:window.sessionStorage.getItem("userId")
        }
      }).then(res=>{
        console.log(this.articles)
        this.articles = res.data.articles
        this.authorInfo = res.data.authorInfo

        // 按阅读量降序排序
        if(this.articles.length===0){
          this.pageNum = 0
          this.totalNum = 0
          this.latestArticles = []
        }
        else{
          this.latestArticles = this.articles.length >=5?this.articles:this.articles.slice(0,5)
            function comparingRule(x,y){
            if(x.read_num > y.read_num)
              return -1
            else if(x.read_num > y.read_num)
              return 1
            return 0
          }
          this.pageNum = 1
          this.totalNum = 1
          this.articles.sort(comparingRule)
        }
      })
    }
  }
}

</script>

<style scoped>
#center{
  padding-top:20px;
  width:85%;
  margin:0 auto;
}


#left{
  float:left;
  width:28%;
  box-shadow: 1px 1px 2px 2px #d0d2d1,
  -1px -1px 2px 2px #d0d2d1;

  min-height:500px;
}

#left > div{
  width:100%;
}

#right{
  float:right;
  width:70%;
  box-shadow: 1px 1px 2px 2px #d0d2d1,
  -1px -1px 2px 2px #d0d2d1;
  padding:20px;

  min-height:500px;
}
</style>
